<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <title>综合算式拼图游戏</title>
    <style>
       .draggable {
            cursor: grab;
        }

       .dragging {
            cursor: grabbing;
        }

       .droppable {
            border: 2px dashed #ccc;
            min-height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

       .piece-waiting-area {
            min-height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
        }
    </style>
</head>

<body class="bg-gray-100 p-8">
    <div class="container mx-auto bg-white p-8 rounded shadow-md">
        <h1 class="text-3xl font-bold text-center mb-8">综合算式拼图游戏</h1>
        <div class="flex justify-center space-x-4 mb-4">
            <button id="easyBtn" class="bg-yellow-500 text-white p-2 rounded hover:bg-yellow-600">简单难度</button>
            <button id="hardBtn" class="bg-red-500 text-white p-2 rounded hover:bg-red-600">困难难度</button>
            <button id="exitBtn" class="bg-gray-500 text-white p-2 rounded hover:bg-gray-600">退出题目</button>
            <button id="hintBtn" class="bg-purple-500 text-white p-2 rounded hover:bg-purple-600">智能提示</button>
        </div>
        <p id="question" class="text-lg text-center mb-4"></p>
        <div id="puzzlePieces" class="piece-waiting-area mb-8"></div>
        <div class="droppable mx-auto w-1/2 mb-8"></div>
        <div class="text-center">
            <button id="checkBtn" class="bg-green-500 text-white p-2 rounded hover:bg-green-600">检查答案</button>
            <div id="result" class="mt-4"></div>
        </div>
    </div>
    <script>
        const easyQuestions = [
            {
                question: '小明有 2 颗糖，小红的糖是小明的 3 倍，问小红有几颗糖，列出综合算式。',
                pieces: ['2', '×', '3'],
                answer: '2*3',
                hint: '想想倍数关系用什么运算呢？',
                explanation: '因为小红的糖是小明的 3 倍，所以用小明的糖数乘以 3，即 2 × 3。'
            },
            {
                question: '商店里有 4 个苹果，香蕉的数量比苹果多 2 个，问苹果和香蕉一共有多少个，列出综合算式。',
                pieces: ['4', '+', '4', '+', '2'],
                answer: '4+4+2',
                hint: '先算出香蕉的数量，再加上苹果的数量哦。',
                explanation: '香蕉比苹果多 2 个，所以香蕉有 4 + 2 个，再加上苹果的 4 个，就是 4 + 4 + 2。'
            }
        ];

        const hardQuestions = [
            {
                question: '小明有 3 颗糖，小红的糖比小明的 2 倍还多 1 颗，问小红有几颗糖，列出综合算式。',
                pieces: ['3', '×', '2', '+', '1'],
                answer: '3*2+1',
                hint: '先算出小明糖数的 2 倍，再加上多的 1 颗。',
                explanation: '小明糖数的 2 倍是 3 × 2，再多 1 颗就是 3 × 2 + 1。'
            },
            {
                question: '班级里男生有 5 人，女生人数比男生的 2 倍少 1 人，问班级总人数是多少，列出综合算式。',
                pieces: ['5', '+', '(', '5', '×', '2', '-', '1', ')'],
                answer: '5+(5*2 - 1)',
                hint: '先算出女生的人数，要注意用括号哦。',
                explanation: '女生人数是男生的 2 倍少 1 人，即 5 × 2 - 1，再加上男生的 5 人，就是 5 + (5 × 2 - 1)。'
            }
        ];

        const easyBtn = document.getElementById('easyBtn');
        const hardBtn = document.getElementById('hardBtn');
        const exitBtn = document.getElementById('exitBtn');
        const hintBtn = document.getElementById('hintBtn');
        const questionPara = document.getElementById('question');
        const puzzlePiecesDiv = document.getElementById('puzzlePieces');
        const droppable = document.querySelector('.droppable');
        const checkBtn = document.getElementById('checkBtn');
        const resultDiv = document.getElementById('result');
        let currentQuestion;
        let consecutiveCorrect = 0;
        let consecutiveWrong = 0;

        function shuffleArray(array) {
            for (let i = array.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
            return array;
        }

        function setupQuestion(questions) {
            const randomIndex = Math.floor(Math.random() * questions.length);
            currentQuestion = questions[randomIndex];
            questionPara.textContent = currentQuestion.question;
            puzzlePiecesDiv.innerHTML = '';
            droppable.innerHTML = '';
            resultDiv.textContent = '';

            const shuffledPieces = shuffleArray([...currentQuestion.pieces]);

            shuffledPieces.forEach(piece => {
                const pieceDiv = document.createElement('div');
                pieceDiv.classList.add('draggable', 'bg-blue-200', 'p-2', 'rounded');
                pieceDiv.draggable = true;
                pieceDiv.textContent = piece;
                puzzlePiecesDiv.appendChild(pieceDiv);
            });

            const draggables = document.querySelectorAll('.draggable');
            draggables.forEach(draggable => {
                draggable.addEventListener('dragstart', () => {
                    draggable.classList.add('dragging');
                });

                draggable.addEventListener('dragend', () => {
                    draggable.classList.remove('dragging');
                });
            });
        }

        droppable.addEventListener('dragover', e => {
            e.preventDefault();
        });

        droppable.addEventListener('drop', e => {
            e.preventDefault();
            const dragging = document.querySelector('.dragging');
            droppable.appendChild(dragging);
        });

        puzzlePiecesDiv.addEventListener('dragover', e => {
            e.preventDefault();
        });

        puzzlePiecesDiv.addEventListener('drop', e => {
            e.preventDefault();
            const dragging = document.querySelector('.dragging');
            puzzlePiecesDiv.appendChild(dragging);
        });

        function evaluateExpression(expression) {
            const convertedExpression = expression.replace(/×/g, '*').replace(/÷/g, '/');
            try {
                return Function('"use strict";return (' + convertedExpression + ')')();
            } catch (error) {
                return null;
            }
        }

        checkBtn.addEventListener('click', () => {
            const userAnswer = Array.from(droppable.children).map(child => child.textContent).join('');
            const userResult = evaluateExpression(userAnswer);
            const correctResult = evaluateExpression(currentQuestion.answer);

            if (userResult!== null && userResult === correctResult) {
                resultDiv.textContent = '恭喜你，回答正确！';
                resultDiv.classList.add('text-green-500');
                resultDiv.classList.remove('text-red-500');
                consecutiveCorrect++;
                consecutiveWrong = 0;
                if (consecutiveCorrect >= 3 && currentQuestion === easyQuestions) {
                    setupQuestion(hardQuestions);
                    consecutiveCorrect = 0;
                }
            } else {
                resultDiv.textContent = '回答错误，请重新尝试。';
                resultDiv.classList.add('text-red-500');
                resultDiv.classList.remove('text-green-500');
                consecutiveWrong++;
                consecutiveCorrect = 0;
                if (consecutiveWrong >= 3 && currentQuestion === hardQuestions) {
                    setupQuestion(easyQuestions);
                    consecutiveWrong = 0;
                }
                resultDiv.innerHTML += `<br>错误解释：${currentQuestion.explanation}`;
            }
        });

        hintBtn.addEventListener('click', () => {
            resultDiv.textContent = `提示：${currentQuestion.hint}`;
            resultDiv.classList.add('text-yellow-500');
            resultDiv.classList.remove('text-green-500', 'text-red-500');
        });

        easyBtn.addEventListener('click', () => {
            setupQuestion(easyQuestions);
        });

        hardBtn.addEventListener('click', () => {
            setupQuestion(hardQuestions);
        });

        exitBtn.addEventListener('click', () => {
            questionPara.textContent = '';
            puzzlePiecesDiv.innerHTML = '';
            droppable.innerHTML = '';
            resultDiv.textContent = '';
        });
    </script>
</body>

</html>    